<template>
  <div class="qyz-point" @click="handlePointClick">
    <div class="point"></div>
    <p v-if="zdmc" class="qyz-point-label">
      {{ item.stationName }}
    </p>
    <p
      v-if="zdskjcCurrentSelect"
      class="qyz-point-observations"
      :style="{ fontSize: `${gcz ? ztdx : 14}px` }"
    >
      {{ isUnit(item.unit) }}
    </p>
  </div>
</template>

<script setup lang="ts">
import { useMonitoringStore } from '@/pages/integrated-monitoring/store/store'
import apiList from '@/pages/integrated-monitoring/api/api'

const props = defineProps(['item'])
const monitoringStore = useMonitoringStore()

const zdmc = computed(() => monitoringStore.componentsVisible.zdmc)
const zh = computed(() => monitoringStore.componentsVisible.zh)
const ztdx = computed(() => monitoringStore.componentsVisible.ztdx)
const gcz = computed(() => monitoringStore.componentsVisible.gcz)
const zdskjcCurrentSelect = computed(() => monitoringStore.zdskjcCurrentSelect)
const zdskjcDataList = computed(() => monitoringStore.zdskjcDataList)
const zdskjcHourDataList = computed(() => monitoringStore.zdskjcHourDataList)

const isUnit = item => {
  let data
  switch (zdskjcCurrentSelect.value) {
    case 'TEM':
      data = item.temperature + '℃'
      break
    case 'RAIN':
      data = item.rainfall + 'mm'
      break
    case 'RH':
      data = item.humidity + '%'
      break
    case 'PRs':
      data = item.pressure + 'hpa'
      break
    case 'WIND':
      data = item.windSpeed + 'm/s'
      break
    default:
      data = item.visibility + 'm'
      break
  }
  return data
}

// 点击事件
const handlePointClick = () => {
  useEventBus('handleStationDialogVisibleHotline').emit(true, props.item)
}
</script>

<style scoped lang="scss">
.qyz-point {
  display: flex;
  align-items: center;
  flex-direction: column;

  .point {
    width: 41px;
    height: 36px;
    background: url(../../../../images/firePiont.png) no-repeat;
    background-size: 100% 100%;
  }

  .qyz-point-label,
  .qyz-point-number,
  .qyz-point-observations {
    white-space: nowrap;
    font-weight: bold;
    font-size: 14px;
    color: #000;
    text-shadow: #fff 1px 0 0, #fff 0 1px 0, #fff -1px 0 0, #fff 0 -1px 0;
    line-height: 18px;
  }
}
</style>
